import { uid } from '@/utils';

import classNames from 'classnames';
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import styles from './index.less';
import { allGet } from '@/services/pc';
import { Popover } from 'antd';

interface OriginZModalProps {
  container?: HTMLElement;
  visible: boolean;
  onClose?: () => void;
  destroyOnClose?: boolean;
  title?: string;
  width?: number;
  content?: any;
  className?: any;
  closeable?: boolean;
  quickClose?: boolean;
  type?: 'success' | 'warning' | 'error' | 'info' | 'nomarl';
}

const OriginZModal: React.FC<OriginZModalProps> = ({
  container = document.body,
  visible,
  onClose,
  destroyOnClose = false,
  title = ' ',
  width = 306,
  closeable = true,
  quickClose = true,
  content: propsContent,
  type = 'nomarl',
  className,
}) => {
  if (destroyOnClose && !visible) {
    return null;
  }

  const content = (
    <div
      className={classNames(styles.zmodal, className)}
      style={{ display: visible ? 'block' : 'none' }}
    >
      <i className={styles.mask} onClick={() => quickClose && onClose?.()} />
      <div className={classNames(styles.main, 'zmodal-main')} style={{ width }}>
        {type !== 'nomarl' && <i className={`${styles[type]}`} />}
        {title && <div className={styles.title}>{title}</div>}
        {propsContent}
        {closeable && (
          <img
            loading="lazy"
            className={styles.close}
            src={require('./images/icon-close.png')}
            alt=""
            onClick={() => onClose?.()}
          />
        )}
      </div>
    </div>
  );

  return ReactDOM.createPortal(
    // 这里可以是dom元素,也可以是react组件,还可以是react节点
    content,
    // 将传入的元素/组件/节点,挂载到container下面
    container,
  );
};

const modalSuccess = (
  options: Pick<
    OriginZModalProps,
    'onClose' | 'title' | 'content' | 'width' | 'closeable' | 'quickClose'
  > = {} as any,
) => {
  const { onClose } = options || {};
  const container = document.createElement('div');
  const id = uid() + '' + Date.now();
  container.setAttribute('id', id);
  document.body.appendChild(container);
  const handleClose = (trigger = true) => {
    if (trigger) {
      onClose?.();
    }
    ReactDOM.unmountComponentAtNode(container);
    if (document.getElementById(id)) {
      document.body.removeChild(container);
    }
  };
  ReactDOM.render(
    <OriginZModal
      {...options}
      type="success"
      container={container}
      visible={true}
      destroyOnClose
      onClose={handleClose}
    />,
    container,
  );
  return {
    close: () => handleClose(false),
  };
};

const modalShow = (
  options: Pick<
    OriginZModalProps,
    'onClose' | 'title' | 'content' | 'width' | 'className'
  > = {} as any,
) => {
  const { onClose } = options || {};
  const container = document.createElement('div');
  const id = uid() + '' + Date.now();
  container.setAttribute('id', id);
  document.body.appendChild(container);
  const handleClose = (trigger = true) => {
    if (trigger) {
      onClose?.();
    }
    ReactDOM.unmountComponentAtNode(container);
    if (document.getElementById(id)) {
      document.body.removeChild(container);
    }
  };
  ReactDOM.render(
    <OriginZModal
      {...options}
      type="nomarl"
      container={container}
      visible={true}
      destroyOnClose
      onClose={handleClose}
    />,
    container,
  );
  return {
    close: () => handleClose(false),
  };
};

type ZModalType = typeof OriginZModal & {
  success: typeof modalSuccess;
  show: typeof modalShow;
  showDownloadPlayer: typeof showDownloadPlayer;
};

const showDownloadPlayer = () => {
  const handleDownload = async (type) => {
    const response = await allGet({
      params: { mod: 'setting', do: 'player', version: 'pc1.0' },
    });
    if (response.success) {
      if (type === 2) {
        window.open(response?.data?.android);
      } else {
        window.open(response?.data?.pc);
      }
    }
  };
  ZModal.show({
    title: '',
    width: 475,
    className: styles.downloadPlayer,
    content: (
      <div className={styles.content}>
        <i className={styles.video}></i>
        <div className={styles.title1}>播放器下载</div>
        <div className={styles.title2}>课程为加密视频，需下载专用播放器学习</div>
        <a
          className={styles.help}
          href="https://www.cgjoy.com/thread-102059-1-1.html"
          target="_blank"
        >
          CGJOY课程专用播放器下载
        </a>
        <div className={styles.buttons}>
          <a
            onClick={() => handleDownload(1)}
            className={classNames(styles.button, styles.primary)}
          >
            <i className={styles.icon}></i>
            <div className={styles.text}>windows 下载</div>
          </a>
          <Popover
            overlayClassName={styles['anzhuopopover']}
            placement="right"
            trigger="hover"
            content={<div className={styles.anzhuo}></div>}
            title={() => null}
          >
            <a onClick={() => handleDownload(2)} className={styles.button}>
              <i className={classNames(styles.icon, styles.az)}></i>
              <div className={styles.text}>Android 下载</div>
            </a>
          </Popover>
        </div>

        <div className={styles.info}>
          <i className={classNames(styles.icon)}></i>iOS/iPad/Mac：请到 App Store ，搜索“CGJOY”下载
        </div>
      </div>
    ),
  });
};

export const ZModal = OriginZModal as ZModalType;
ZModal.success = modalSuccess;
ZModal.show = modalShow;

ZModal.showDownloadPlayer = showDownloadPlayer;

export default ZModal;
